<!-- regionDialog -->
<template>
  <div>
    <el-dialog :title="title" :visible="nodeVisible" @close="close">
      <el-form ref="nodeRef" :model="nodeForm" :rules="formRules">
        <el-form-item
          label="区域名称"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-input
            v-model="nodeForm.name"
            autocomplete="off"
            placeholder="请输入"
            maxlength="15"
            show-word-limit
          />
        </el-form-item>
        <el-form-item
          label="所在区域"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-select v-model="nodeForm.regionId" clearable filterable placeholder="请选择" style="width: 100%">
            <el-option v-for="item in regionList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="所属商圈"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-select v-model="nodeForm.businessId" clearable filterable placeholder="请选择" style="width: 100%">
            <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="归属合作商"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-select v-model="nodeForm.ownerId" clearable filterable placeholder="请选择" style="width: 100%">
            <el-option v-for="item in partnerList" :key="item.id" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item
          label="详细地址"
          :label-width="formLabelWidth"
          prop="name"
        >
          <el-cascader
            v-model="selectedOptions"
            :options="options"
            clearable
            class="PVC"
            size="large"
            style="width: 100%"
            @change="changeFn"
          />

        </el-form-item>

        <el-form-item label="" :label-width="formLabelWidth" prop="remark">
          <el-input
            v-model="desc"
            type="textarea"
            autocomplete="off"
            placeholder="请输入详细地址"
            maxlength="60"
            :autosize="{ minRows: 3, maxRows: 6 }"
            show-word-limit
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import { regionData, CodeToText, TextToCode } from 'element-china-area-data'
import { regionSearch, businessType, partnerSearch, addNode, updateNodeDetail, updateNode } from '@/api'
export default {
  props: {
    nodeVisible: {
      type: Boolean,
      default: false
    },
    isShow: {
      type: Boolean,
      default: false
    },
    regionId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      options: regionData, // 使用中国省市区数组
      selectedOptions: [], // 店铺地址数组
      desc: '',
      addr: '',
      nodeForm: {
        name: '', // 点位名称
        addr: '', // 详细地址
        ownerId: '', // 归属合作商
        regionId: '', // 所在区域
        businessId: '' // 所属商圈
        // desc: '',
        // selectedOptions: []
      },
      formLabelWidth: '120px',

      formRules: {
        name: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],

        addr: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        ownerName: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        regionId: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        businessId: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      params: {
        pageIndex: 1,
        pageSize: 100000
      },
      regionList: [],
      businessList: [],
      partnerList: []
    }
  },
  computed: {
    title() {
      return this.nodeForm.id ? '修改点位' : '新增点位'
    }
  },
  async created() {
    const { data } = await regionSearch(this.params)
    // console.log(res)
    this.regionList = data.currentPageRecords
    const res = await businessType()
    // console.log(res)
    this.businessList = res.data
    const { data: { currentPageRecords }} = await partnerSearch(this.params)
    // console.log(res1)
    this.partnerList = currentPageRecords
    // console.log(TextToCode)
  },
  methods: {
    submit() {
      this.$refs.nodeRef.validate(async(valid) => {
        if (!valid) return
        if (this.nodeForm.id) {
          await updateNode(this.nodeForm.id, {
            ...this.nodeForm,
            addr: `${this.addr}-${this.desc}`,
            areaCode: +this.selectedOptions[1],
            createUserId: 1,
            ownerName: this.partnerList.filter(item => item.id === this.nodeForm.ownerId)[0].name
          })
        } else {
          await addNode({
            ...this.nodeForm,
            addr: `${this.addr}-${this.desc}`,
            areaCode: +this.selectedOptions[1],
            createUserId: 1,
            ownerName: this.partnerList.filter(item => item.id === this.nodeForm.ownerId)[0].name
          })
        }
        this.$message.success(this.title + '成功')
        this.close()
        this.$emit('addNodeFn')
      })
    },
    close() {
      this.$emit('close')
      this.$refs.nodeRef.resetFields()
      this.nodeForm = {
        name: '', // 点位名称
        addr: '', // 详细地址
        ownerId: '', // 归属合作商
        regionId: '', // 所在区域
        businessId: '' // 所属商圈
        // desc: '',
        // selectedOptions: []
      }
    },
    // 地区选择器改变
    changeFn(val) {
      // console.log(val)
      // this.nodeForm.areaCode = val[3]
      this.addr = `${CodeToText[val[0]]}-${CodeToText[val[1]]}-${CodeToText[val[2]]}`
      // console.log(this.addr)
    },
    async updataOpenFn(id) {
      // console.log(id)
      const res = await updateNodeDetail(id)
      // console.log(res)
      this.nodeForm = res.data
      const arr = this.nodeForm.addr.split('-')
      // console.log(arr)
      // console.log(TextToCode[arr[0]].code)
      // console.log(TextToCode[arr[0]][arr[1]].code)
      // console.log(TextToCode[arr[0]][arr[1]][arr[2]].code)
      this.selectedOptions = [TextToCode[arr[0]].code, TextToCode[arr[0]][arr[1]].code, TextToCode[arr[0]][arr[1]][arr[2]].code]
      // console.log(this.selectedOptions)
      this.desc = arr[3]
    }
  }

}
</script>
<style lang='scss' scoped>
::v-deep .el-dialog__header {
  background: #fff;
  .el-dialog__title {
    font-weight: 700;
    font-size: 16px;
    color: #333;
  }
}
::v-deep .el-icon-close:before {
  /* color: #fff; */
  color: #909399;
}
::v-deep .el-table {
  margin-top: -14px;
}
</style>
